<template>
  <view class="container">
	<top-back-navbar position="fixed" title="钱包-充值" background="#001b4d" color="#ffff"></top-back-navbar>
    <view class="big_title f-w-700">充值金额</view>
    <view class="header u-f-ajc u-f-column relative">
      <view>
        <u-input v-model="money" type="number" placeholder="请输入充值金额" input-align="center" placeholder-style="color: #fff;"
          :custom-style="{'color': '#fff', 'fontSize': '50rpx'}"></u-input>
      </view>

      <view class="absolute abso_box" @click="cz_jilu">充值记录</view>
    </view>

    <view class="radio_list">
      <view class="radio_item u-f-ac u-f-jsb" @click="type='bank'">
        <view class="u-f-ac">
          <image src="/static/images/mine/yhk.jpg" mode="widthFix" class="item_image"></image>
          <view class="f-w-700">银行卡</view>
        </view>
        <view>
          <radio value="bank" color="#BA1B21" :checked='type == "bank"' />
          </radio>
        </view>
      </view>
      <view class="radio_item u-f-ac u-f-jsb" @click="type='ysf'">
        <view class="u-f-ac">
          <image src="/static/images/mine/ysf.png" mode="widthFix" class="item_image"></image>
          <view class="f-w-700">云闪付</view>
        </view>
        <view>
          <radio value="ysf" color="#BA1B21" :checked='type == "ysf"' />
          </radio>
        </view>
      </view>
      <view class="radio_item u-f-ac u-f-jsb" @click="type='wechat'">
        <view class="u-f-ac">
          <image src="/static/images/mine/wx.jpg" mode="widthFix" class="item_image"></image>
          <view class="f-w-700">微信</view>
        </view>
        <view>
          <radio value="wechat" color="#BA1B21" :checked='type == "wechat"' />
          </radio>
        </view>
      </view>
    </view>
    <view class="big_title f-w-700">交易凭证</view>

    <view class="choose_image u-f-ajc" @click="chooseImage">
      <view v-if="!this.imagess[0]" class="f-w-700">点击上传交易凭证</view>
      <view v-else style="width: 100%;height: 100%;">
        <image :src="this.imagess[0]"></image>
      </view>
    </view>


    <view class="footer">
      <button class="btn" type="primary" @click="ljcz">立即充值</button>
    </view>

    <view class="texts">
      <view>请直接转账到以下银行账户</view>
      <view @click="$handleCopy(payInfo.mybankname)">开户名称：<text style="color: red;">{{payInfo.mybankname}}</text></view>
      <view @click="$handleCopy(payInfo.bankid)">开户账号：<text style="color: red;">{{payInfo.bankid}}</text></view>
      <view @click="$handleCopy(payInfo.bankname)">开户行名：<text style="color: red;">{{payInfo.bankname}}</text></view>
      <view @click="$handleCopy(payInfo.bankaddress)">开户地址：<text style="color: red;">{{payInfo.bankaddress}}</text></view>
      <view>可点击红色文字复制银行账户信息</view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        bank: {},
        res: {},
        openid: '',
        money: '',
        active: "active",
        checked: 'checked',
        boolean: 'none',
        boolean_wx: 'none',
        boolean_zfb: 'none',
        bankout: 'none',
        arrs: [],
        realname: '',
        bankname: '',
        bankbranch: '',
        bankbranch2: '',
        bankbranch3: '',
        bankcard: '',
        bankcard1: '',
        credit: '',
        multiple: '',
        withdrawcharge: '',
        withdrawmoney: '',
        // 地址
        accountarea: '-请选择地区-',
        cityPickerValueDefault: [0, 0, 0],
        pickerValueDefault: [0],
        pickerValueArray: [],
        // mulLinkageTwoPicker: cityData,
        // province:province,
        // city:city,
        // area:area,
        // asd:asd,
        themeColor: '#007AFF',
        pickerText: '',
        mode: '',
        deepLength: 1,
        datavalue: '',
        payType: '', // 支付类型
        imagess: [], // 数组类型图片 wx
        imgurl: '', // 字符串类型图片 wx
        imagesss: [], // 数组类型图片 zfb
        imgurls: '', // 字符串类型图片 zfb
        wxskm: '',
        zfbskm: '',
        type: 'bank',
        payInfo: {},
        
      };
    },
    onLoad: function() {
      // uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          // this.setAjax()
          this.getPayInfo()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      async getPayInfo() {
        let {
          data
        } = await this.$myRequest({
          url: "/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.bank_info&app=1",
          data: {
            openid: uni.getStorageSync('openid')
          }
        })
        console.log(data)
        this.payInfo = data
      },
      copyBankCard(data) {
        uni.setClipboardData({
          data: data,
          success() {
            uni.showToast({
              title: '复制成功',
              duration: 1000,
              icon: "none"
            })
          }
        })
      },
      // setAjax() {
      //   uni.request({
      //     url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.pay_info&app=1',
      //     method: 'POST',
      //     data: {
      //       'openid': this.openid
      //     },
      //     header: {
      //       'Content-Type': 'application/x-www-form-urlencoded'
      //     },
      //     success: res => {
      //       this.res = res.data
      //       // console.log(this.res)
      //       this.bank = res.data.bank
      //       this.wxskm = res.data.wechat_collection
      //       this.zfbskm = res.data.alipay_collection
      //       uni.hideLoading()
      //     },
      //     fail: () => {},
      //     complete: () => {}
      //   });
      // },
      chooseImage() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  _this.res.wechat = true
                  // console.log(res)
                  images.push(JSON.parse(res.data).url)
                  _this.imagess = images
                  // _this.avatar = _this.imagess[0]

                  img = img + JSON.parse(res.data).url + ';'
                  _this.imgurl = img
                }
              });
            }
          }
        });
      },
      select_img() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  _this.res.alipay = true
                  // console.log(res)
                  images.push(JSON.parse(res.data).url)
                  _this.imagesss = images
                  // _this.avatar = _this.imagess[0]

                  img = img + JSON.parse(res.data).url + ';'
                  _this.imgurls = img
                }
              });
            }
          }
        });
      },
      previewImage() {
        console.log(this.wxskm) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(this.wxskm);
        console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
          current: 0,
          urls: images,
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      previewImage1() {
        console.log(this.zfbskm) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(this.zfbskm);
        console.log(images) // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
          current: 0,
          urls: images,
          longPressActions: { //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
              console.log(data);
              uni.saveImageToPhotosAlbum({ //保存图片到相册
                filePath: payUrl,
                success: function() {
                  uni.showToast({
                    icon: 'success',
                    title: '保存成功'
                  })
                },
                fail: (err) => {
                  uni.showToast({
                    icon: 'none',
                    title: '保存失败，请重新尝试'
                  })
                }
              });
            },
            fail: (err) => {
              console.log(err.errMsg);
            }
          }
        });
      },
      //选择支付方式
      changePayType(type) {
        // console.log(type)
        this.payType = type;
        if (type == 1) { // 微信
          this.boolean_wx = 'block'
          this.boolean_zfb = 'none'
          this.boolean = 'none'
          this.type = 'wechat'
        }
        if (type == 2) { // 支付宝
          this.boolean_zfb = 'block'
          this.boolean_wx = 'none'
          this.boolean = 'none'
          this.type = 'alipay'
        }
        if (type == 3) {
          this.boolean = 'block'
          this.boolean_wx = 'none'
          this.boolean_zfb = 'none'
          this.type = 'bank'
        }
      },
      onCancel(e) {},
      showMulLinkageThreePicker() {
        this.$refs.mpvueCityPicker.show()
      },
      onConfirm(e) {
        this.accountarea = e.label
        console.log(this.accountarea)
        // var pro = e.value[0]
        // var city = e.value[1]
        // var area = e.cityCode
        // this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' +area
        // var a = e.label.split("-")
        // a = a[0] + ' ' + a[1] + ' ' + a[2]
        // this.submit.areas = a
      },
      
      check() {
        this.boolean = this.boolean == 'block' ? 'none' : 'block'
      },
      bank_out() {
        this.bankout = 'block'
      },
      bank_miss(index) {
        this.bankname = this.arrs[index]
        this.bankout = 'none'
      },
      cz_jilu() {
        uni.navigateTo({
          url: './czjl/czjl'
        })
      },
      jumpto() {
        if (this.payType == 1) {
          this.wx_tx()
        }
        if (this.payType == 2) {
          this.zfb_tx()
        }
        if (this.payType == 3) {
          this.jump()
        }
      },
      async ljcz() {
        if (this.type == 'ysf' || this.type == 'wechat') return this.$u.toast('暂未开放')
        var datas = {
          'openid': this.openid,
          'money': this.money,
          'type': this.type,
          'pic_url': this.imagess[0]
        }
        let {data} = await this.$myRequest({
          url: '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.recharge&app=1',
          method: 'post',
          data: datas,
        })
        uni.showModal({
          title: '提示',
          content: data.message,
          showCancel: false,
          success() {
            if (data.error == 0) {
              setTimeout(() => {
                uni.navigateTo({
                  url: './czjl/czjl'
                })
              }, 1000)
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f2f5fa;
    box-sizing: border-box;
  }
  .container{
	  padding: 0 30rpx 30rpx 30rpx;
	  height: 100%;
  }

  .big_title {
    font-size: 32rpx;
    color: #1e1310;
	font-weight: 600;
  }

  .header {
    background-color: #001b4d;
    width: 100%;
    height: 200rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    margin: 20rpx 0 30rpx;
    color: #fff;
  }

  .abso_box {
    right: 20rpx;
    top: 20rpx;
    border-radius: 10rpx;
    background-color: #667694;
    padding: 5rpx 20rpx;
  }

  .radio_list {
    margin-bottom: 30rpx;
    box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    border-radius: 20rpx;
    padding: 0 20rpx;
    overflow: hidden;
    background-color: #FFFFFF;

    .radio_item {
      width: 100%;
      height: 110rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      border-bottom: 1px solid #EAEAEA;

      image {
        width: 70rpx;
        margin-right: 20rpx;
      }

      view {
        font-size: 30rpx;
      }

      radio {
        transform: scale(0.8, 0.8);
      }
    }
  }

  .choose_image {
    background-color: #FFFFFF;
    width: 100%;
    height: 330rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    margin: 30rpx 0 80rpx;
    padding: 20rpx;
    color: #666;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .texts {
    margin-top: 30rpx;

    >view {
      margin-bottom: 10rpx;
    }
  }

  .footer {
    // position: fixed;
    // bottom: 50rpx;
    width: 100%;
    // padding: 0 50rpx;
    box-sizing: border-box;
  }

  .footer button {
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    background: #32539b;
  }

  .footer button.button-hover {
    background: #dc4d4d;
  }
</style>
